<template>
	<view>
		<view class="c-box" id="history">
		    <view class="my">
		        <view class="mt">
		            <person-header :currentUser="currentUser"></person-header>
		        </view>
		    </view>
		    <view class="browsingHistory">
		        <view v-if="type=='msg'">
		            <view class="mt">共<view class="span" >{{historyCount}}</view>位用户与您在线沟通</view>
		        </view>
		        <view v-else-if="type=='phone'">
		            <view class="mt">共<view class="span" >{{historyCount}}</view>位用户与您电话沟通</view>
		        </view>
		        <view v-else>
		            <view class="mt">共计访问<view class="span" >{{historyCount}}</view>次，注册用户访问<view class="span" >{{historyCount - visitorCount}}</view>次，游客访问<view class="span" >{{visitorCount}}</view>次</view>
		        </view>
		        <view class="mb">
		            <view class="ul">
		                <view v-for="(item,index) in showHistory">
		                    <view class="li">
		                        <view v-if="type=='msg'">
		                            <view class="a" @click="toChat(item.id)">
		                                <view class="img"><image mode="widthFix" :src="item.portrait?item.portrait:'/static/image/wutouxiang.png'"/></view>
		                                <view class="name" >
		                                    {{item.company?item.company:(item.userName?item.userName:'匿名')}}
		                                </view>
		                                <view class="time" >{{item.createAt}}</view>
		                            </view>
		                        </view>
		                        <view v-else>
		                            <view class="a" @click="enterPersonalByType(item)">
		                                <view class="img"><image  mode="widthFix" :src="item.portrait?item.portrait:'/static/image/wutouxiang.png'"/></view>
		                                <view class="name" >
		                                    {{item.company?item.company:(item.userName?item.userName:'匿名')}}
		                                </view>
		                                <view class="time" >{{item.createAt}}</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="lastLine">暂无更多浏览记录</view>
		</view>
	</view>
</template>

<script>
	import commonApi from '@/utils/commonMethod.js';
	import personHeader from "../../components/person/personHeader.vue";
	export default {
		components: {
			personHeader
		},
		data() {
			return {
				currentUser: {},
				showHistory: [],
				historyCount: '',
				visitorCount:'',
				type:'',
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		
		async onLoad(options) {
			this.type = options.type
			const productId = options.productId
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
			let types = []
			switch (this.type) {
				case 'homeBrowse':
					uni.setNavigationBarTitle({
						title:'展厅浏览量'
					})
					types = [3]
					break;
				case 'browseMine':
					uni.setNavigationBarTitle({
						title:'商品浏览量'
					})
					types = [1,2]
					break;
				case 'watchMyLive':
					uni.setNavigationBarTitle({
						title:'直播观看量'
					})
					types = [4]
					break;
				case 'msg':
					uni.setNavigationBarTitle({
						title:'在线沟通量'
					})
					types = [5]
					break;
				case 'phone':
					uni.setNavigationBarTitle({
						title:'电话沟通量'
					})
					types = [6]
					break;
			}
			//获取展厅首页浏览量
			await commonApi.getBrowseMineByType(this.currentUser.id, types,productId).then(res =>{
				this.historyCount = res.data.countAndList.count
				this.visitorCount = res.data.countAndList.visitorCount
				this.showHistory = res.data.countAndList.list
			})
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		onShow(){
				
			setTimeout(()=> {
				
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
				
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload(){
				setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"浏览量")
			  			
			},
			enterPersonalByType(item){
				commonApi.enterPersonalByType(item)
			},
			toChat(userId){
				uni.navigateTo({
					url: 'pages/news/chatDetail/chatDetail?toUserId=' + userId
				})
			}
		}
	}
</script>

<style>
	.my .mt {
		/* height: 5.733333rem; */
		background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-bottom: 28rpx;
		background-color: #fff;
		height: auto;
	}
	.browsingHistory .mt {
		padding: 0 28rpx;
		line-height: 56rpx;
		font-size: 22rpx;
		color: #333333;
		display: flex;
	}
	.browsingHistory .mt .span {
	    color: #029e9d;
	}
	.browsingHistory .mb {
	    background: #fff;
	    padding: 14rpx 28rpx;
	}
	.ul {
		list-style: none;
	}
	.browsingHistory .mb .li {
		overflow: hidden;
	}
	.browsingHistory .mb .li .a {
	    display: block;
	    padding: 14rpx 0;
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	}
	.browsingHistory .mb .li .img {
	    width: 56rpx;
	    height: 56rpx;
	    border-radius: 50%;
	    overflow: hidden;
	    float: left;
	    margin-right: 28rpx;
	}
	image{
		width: 100%;
	}
	.browsingHistory .mb .li .name {
	    float: left;
	    line-height: 93rpx;
	    font-size: 22rpx;
	    color: #333333;
	    width: 350rpx;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.browsingHistory .mb .li .time {
	    float: right;
	    line-height: 93rpx;
	    margin-left: 21rpx;
	    font-size: 22rpx;
	    color: #8f9aa8;
	    white-space: nowrap;
	}
	.lastLine {
	    font-size: 20rpx;
	    color: #b0b2bf;
	    line-height: 70rpx;
	    text-align: center;
	    padding-bottom: 28rpx;
	    margin-top: 102rpx;
	}
</style>